<template>
	<div class="pt15 pr15 pb15 pl15">
		<el-form ref="formRef" :model="line" size="default" label-width="50px">
			<el-form-item label="来往">
				<el-input v-model="line.contact" placeholder="来往" clearable disabled />
			</el-form-item>
			<el-form-item label="类型">
				<el-input v-model="line.type" placeholder="类型" clearable disabled />
			</el-form-item>
			<!-- <el-form-item label="label">
        <el-input v-model="line.label" placeholder="请输入label内容" clearable />
      </el-form-item> -->
			<!-- <el-form-item label="颜色">
        <el-color-picker v-model="line.color" />
      </el-form-item> -->
			<el-form-item :rules="antennaRules" label="触脚">
				<el-select v-model="line.antenna" placeholder="请选择触脚" @change="changeAntenna">
					<el-option v-for="item in antennas" :key="item.value" :label="item.label" :value="item.value">
						<span :style="{ background: item.color }" style="width: 6px; height: 6px; border-radius: 50%; display: inline-block" />
						{{ item.label }} &nbsp;{{ item.text }}
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button @click="onLineTextReset">
					<i class="el-icon-refresh" />
					重置
				</el-button>
				<el-button type="primary" @click="onLineTextChange">
					<i class="el-icon-check" />

					保存
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	data() {
		return {
			line: {},
			antennas: [
				{
					label: '触角0',
					value: '0',
					color: '#409EFF',
					text: '执行后都触发',
				},
				{
					label: '触角1',
					value: '1',
					color: '#67C23A',
					text: '成功后触发',
				},
				{
					label: '触角2',
					value: '2',
					color: '#F56C6C',
					text: '失败后触发',
				},
			],
			antennaRules: { required: true, message: '请选择触角', trigger: 'blur' },
		};
	},
	methods: {
		// 获取父组件数据
		getParentData(data) {
			console.log('getParentData', data);
			this.line = data;
		},
		// 重置
		onLineTextReset() {
			this.line.label = '';
			this.line.color = '';
		},
		// 保存
		onLineTextChange() {
			const params = {
				label: this.line.label,
				color: this.line.color,
				FBItem: this.line,
			};
			this.$emit('change', params);
			this.$emit('close', false);
		},
		changeAntenna(val) {
			this.line.color = this.antennas[val].color;
			console.log(this.line);
		},
	},
};
</script>
